import type { ClassAuditType } from '../interface'
import { useLocalObservable, useObserver } from 'mobx-react'
import { history } from 'umi'
import { fetchClassAuditDetail, rejectClass } from '../api'
import { useEffect } from 'react'
import { Dialog, TextArea, Toast } from 'antd-mobile'
import { rpxToPx } from '@/utils/share'
import Picture from '@/components/Global/Picture'
import Btn from '@/components/Global/Btn'
import useRoleCheck, { stateMap as checkStateMap } from '../../trainPlan/hooks/useRoleCheck'
import classNames from 'classnames'
import styles from './index.module.less'
import NavBar from '@/components/Global/NavBar'

/** 班级审核详情 */
const ClassAuditDetail = () => {
    const queryParams = history.location.query as { id: string }

    const store = useLocalObservable(() => ({
        /** 培训计划详细信息 */
        detail: {} as Partial<ClassAuditType.Detail>,

        async fetchTrainPlanDetailToStore() {
            const data = await fetchClassAuditDetail(Number(queryParams.id))
            if (!data) return

            store.detail = data
        },
    }))

    const { checkState: checkStateByRole } = useRoleCheck({ item: store.detail })

    useEffect(() => {
        const fetch = async () => {
            const tostShow = Toast.show({
                icon: 'loading',
                content: '加载中...',
                duration: 0,
            })
            await store.fetchTrainPlanDetailToStore()
            tostShow.close()
        }

        fetch()
    }, [store])

    const showProvinceCheckResult = store.detail.province_check_status !== 0
    const showCityCheckResult = store.detail.city_check_status && store.detail.grade === 1

    /** 通过 */
    const onToApprovePage = async () => {
        history.push({
            pathname: '/classAudit/approve',
            query: {
                id: queryParams.id,
            },
        })
    }

    /** 驳回 */
    const onReject = async () => {
        // 不通过意见
        let reason = ''

        Dialog.confirm({
            title: '不通过意见',
            confirmText: '提交',
            content: (
                <>
                    <TextArea
                        style={{
                            border: '1px solid #ddd',
                            borderRadius: rpxToPx(8),
                            padding: rpxToPx(24),
                            fontSize: rpxToPx(30),
                        }}
                        placeholder="请输入内容"
                        showCount
                        maxLength={50}
                        rows={4}
                        onChange={v => (reason = v)}
                    />
                    <span style={{ fontSize: rpxToPx(26), color: '#999' }}>文字要求不超过50字</span>
                </>
            ),
            onConfirm: async () => {
                try {
                    await rejectClass(Number(queryParams.id), reason)
                    Toast.show({ icon: 'success', content: '操作成功' })
                    history.push('/train?tab=trainPlan')
                } catch (error) {}
            },
        })
    }

    return useObserver(() => {
        return (
            <>
                <NavBar title="开班审核详情" />

                <div className={styles.page}>
                    {/* 开班信息 */}
                    <div className={styles.plate}>
                        <div className={styles.plate_header}>班级信息</div>

                        <div className={styles.plate_content}>
                            <div className={styles.plate_content_field}>
                                <label>申请主办单位</label> <span>{store.detail.company_name}</span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>主办单位联系人</label>
                                <span>{store.detail.company_realname}</span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>联系电话</label> <span>{store.detail.company_phone}</span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>师资班类别</label> <span>{store.detail.name}</span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>培训时间</label>{' '}
                                <span>
                                    {store.detail.begin_date}至{store.detail.end_date}
                                </span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>报到时间</label> <span>{store.detail.report_date}</span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>培训地点</label> <span>{store.detail.region}</span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>认证级别</label> <span>{store.detail.group_grade_name}</span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>授课培训师费用</label>
                                <span>
                                    {store.detail.cost
                                        ? `${store.detail.cost}元/人/天`
                                        : store.detail.cost}
                                </span>
                            </div>
                            <div className={styles.plate_content_field}>
                                <label>盖章件</label>
                                <span>
                                    <Picture src={store.detail.image} />
                                </span>
                            </div>
                        </div>
                    </div>
                    {/* 培训师推荐 */}
                    <div className={styles.plate}>
                        <div className={styles.plate_header}>培训师推荐</div>
                        <div className={styles.plate_teacherShow}>
                            {(store.detail.teacher_arr ?? []).map(item => {
                                return (
                                    <div className={styles.plate_teacherContainer} key={item.no}>
                                        <div className={styles.plate_teacherContainer_header}>
                                            {item.teacher}
                                        </div>
                                        <div className={styles.plate_teacherContainer_sex}>
                                            {item.sex_name}
                                        </div>
                                        <div className={styles.plate_teacherContainer_region}>
                                            {item.region_name}
                                        </div>
                                    </div>
                                )
                            })}
                        </div>
                    </div>

                    {/* 审核结果 */}
                    {[showProvinceCheckResult, showCityCheckResult].some(v => v) && (
                        <div className={styles.plate}>
                            <div className={styles.plate_header}>审核结果</div>

                            <>
                                {/* 审核结果 - 市 */}
                                {showCityCheckResult &&
                                    (() => {
                                        const checkState =
                                            checkStateMap[store.detail.city_check_status ?? -1]

                                        return (
                                            <div
                                                className={classNames(
                                                    styles.plate_content,
                                                    styles.plate_content_city,
                                                )}
                                            >
                                                <div className={styles.plate_content_field}>
                                                    <label>审核结果</label>
                                                    <span style={{ color: checkState.color16 }}>
                                                        {checkState.text}
                                                    </span>
                                                </div>
                                                <div className={styles.plate_content_field}>
                                                    <label>盖章件</label>
                                                    <span>
                                                        <Picture
                                                            src={store.detail.city_check_image}
                                                        />
                                                    </span>
                                                </div>
                                                <div className={styles.plate_content_field}>
                                                    <label>审核时间</label>
                                                    <span>{store.detail.city_check_time}</span>
                                                </div>
                                            </div>
                                        )
                                    })()}

                                {/* 审核结果 - 省 */}
                                {showProvinceCheckResult &&
                                    (() => {
                                        const checkState =
                                            checkStateMap[store.detail.province_check_status ?? -1]

                                        return (
                                            <div
                                                className={classNames(
                                                    styles.plate_content,
                                                    styles.plate_content_province,
                                                )}
                                            >
                                                <div className={styles.plate_content_field}>
                                                    <label>审核结果</label>
                                                    <span style={{ color: checkState.color16 }}>
                                                        {checkState.text}
                                                    </span>
                                                </div>
                                                <div className={styles.plate_content_field}>
                                                    <label>盖章件</label>
                                                    <span>
                                                        <Picture
                                                            src={store.detail.province_check_image}
                                                        />
                                                    </span>
                                                </div>
                                                <div className={styles.plate_content_field}>
                                                    <label>审核时间</label>
                                                    <span>{store.detail.province_check_time}</span>
                                                </div>
                                            </div>
                                        )
                                    })()}
                            </>
                        </div>
                    )}
                    {/* 审核 */}
                    {checkStateByRole.check === 0 && (
                        <div className={styles.footerWrap}>
                            <div className={styles.footer}>
                                <Btn className={styles.footer_reject} task={onReject}>
                                    不通过
                                </Btn>
                                <Btn className={styles.footer_approve} task={onToApprovePage}>
                                    通过
                                </Btn>
                            </div>
                        </div>
                    )}
                </div>
            </>
        )
    })
}

export default ClassAuditDetail
